
<template>
  <main>
    <el-row class="row">
      <el-col :span="4">
        <div class="main">
          <div class="login-header">
            小贷管理平台-修改密码
          </div>
          <div class="login-box">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="旧密码" prop="oldPwd">
                <el-input type="password" size="small" placeholder="旧密码" v-model="form.oldPwd"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="pwd">
                <el-input type="password" size="small" placeholder="新密码" v-model="form.pwd"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPwd">
                <el-input type="password" size="small" placeholder="确认密码" v-model="form.confirmPwd"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :disabled="loginStatus" @click="submitForm('form')" id="submit">确认修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </main>
</template>

<script>
// 引入api
import {
  modifyPassword,
}
  from '@/services/getData'
export default {
  data() {
    return {
      loginStatus: false,
      ajaxData: {
        userName: '',
        pwd: ''
      },
      form: {
        oldPwd: '',
        pwd: '',
        confirmPwd: '',
      },
      rules: {
        // 旧密码
        oldPwd: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('不能为空'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        // 新密码
        pwd: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('不能为空'))
              } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{5,11}$/.test(value)) {
                // callback(new Error('密码格式必须由数字、字母和_，两种以上组成,6~12位'))
                callback(new Error('任意数字、字母和_中的两种,6~12位'))
              } else if (value === this.form.oldPwd) {
                callback(new Error('新旧密码不能相同'))
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        // 确认密码
        confirmPwd: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('不能为空'))
              } else if (value !== this.form.pwd) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    /**
     *  表单校验
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          console.log('验证失败')
        }
      });
    },
    /**
     *  登录
     */
    submit() {
      let form = this.form

      let data = {
        username: JSON.parse(sessionStorage._router_userInfo_).user.accountNo,
        oldPassword: form.oldPwd,
        password: form.pwd
      }
      this.loginStatus = true
      modifyPassword(data).then((res) => {
        //后台返回的数据
        if (res.errorCode === '0000') {
          this.$message.success('修改密码成功')
          this.$router.push('/')
        } else {
          this.$message.error(res.errorDesc)
        }
      })
        // 现在没有对错误进行处理， 感觉有点坑坑哒
        .catch((res) => {
          this.loginStatus = false
        })
    }
  },
  created() {
  }
}
</script>

<style lang="less">
main {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}
.el-form-item__label {
  width: 80px !important;
}
.row {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.main {
  width: 330px;
  background-color: #fff;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

.has-feedback {
  margin-top: 20px;
}

.login-header {
  background-color: #f1f1f1;
  border-bottom: 1px solid #e9eaec;
  height: 50px;
  padding-left: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #1c2438;
  line-height: 50px;
}

.login-box {
  padding: 20px;
}

.input-group {
  margin-top: 20px;
}

.block {
  display: block;
}

#submit {
  width: 100%;
}
</style>
